<template>
  <div id="listItem-component">
    <transition-group name="slide-fade">
      <template v-if="curType == 0 || curType == 1">
        <div
          class="listItem-item"
          v-for="(item, index) in curDataArr[1]"
          :key="'cs' + item.ordercode + index"
          @click="gotoPage(item)"
        >
          <header class="c_header clr">
            <span class="fl">订单号：{{ item.ordercode }}</span>
            <span :class="['fr', item.state == 0 ? 'o_orange' : '']">{{ item.state == 0 ? '待支付' : '已支付' }}</span>
          </header>
          <section class="c_body">
            <div class="img">
              <img :src="item.goodsimg" :alt="item.chanpantype" />
            </div>
            <div class="info">
              <p class="p0">
                <span class="name">{{ item.goodsname }}</span>
                <span class="price">¥{{ item.fee }}</span>
              </p>
              <p class="p3">{{ item.createtime }}</p>
            </div>
          </section>

          <footer class="c_foot">
            <!-- 模拟状态1：测算，待支付 -->
            <div class="group clr" v-if="item.state == 0">
              <div class="right">
                <!-- 这里不用绑定支付事件， 最外层已经做了跳转 -->
                <div class="btn btn_orange">立即支付</div>
              </div>
            </div>
            <!-- 模拟状态2：测算，已支付 -->
            <div class="group clr" v-if="item.state == 1">
              <div class="right">
                <div class="btn btn_gray" @click.stop="delOrderItem(index, 1)">删除订单</div>
              </div>
            </div>
          </footer>
        </div>
      </template>

      <template v-if="curType == 0 || curType == 2">
        <div
          class="listItem-item"
          v-for="(item,index) in curDataArr[2]"
          :key="'qs' + item.orders_id"
          @click="gotoOrderInfo(item)"
        >
          <header class="c_header clr">
            <span class="fl">订单号：{{ item.orders_ordercode }}</span>
            <span
              :class="[
                'fr',
                item.status == 1 || item.status == 2 || item.status == 3 ? 'o_orange' : ''
              ]"
              >{{ item.status | whichStatus }}</span
            >
          </header>
          <section class="c_body">
            <div class="img">
              <img :src="item.thumb_img" :alt="item.name" />
            </div>
            <div class="info">
              <p class="p0">
                <span class="name">{{ item.name }}</span>
                <span class="price">¥{{ item.orders_fee }}</span>
              </p>
              <p class="p2">咨询项目：{{ item.orders_question }}</p>
              <p class="p3">{{ item.orders_createtime | initDateStr }}</p>
            </div>
          </section>

          <!-- 模拟状态6：咨询，解答中的时候不显示footer-->
          <footer class="c_foot" v-if="item.status != 3">
            <!-- 模拟状态3：咨询，待支付 -->
            <div class="group clr" v-if="item.status == 1">
              <div class="left">
                <div class="time">
                  <i></i>
                  <!-- 倒计时组件 -->
                  <countTime
                    :unix-time="item.orders_createtime"
                    class="timebox"
                    :is-all='curType'
                    @over='timeover(item.orders_ordercode,index,item)'
                  ></countTime>
                </div>
              </div>
              <div class="right">
                <div class="btn btn_gray" @click.stop="delOrderItem(index, 2)">删除订单</div>
                <div class="btn btn_orange" @click.stop="gotoOrderPay(item)">立即支付</div>
              </div>
            </div>
            <!-- 模拟状态4：咨询，信息未填写 已支付 -->
            <div class="group clr" v-if="item.status == 2">
              <div class="right">
                <div class="btn btn_orange" @click.stop="gotoEditInfo(item)">补充信息</div>
              </div>
            </div>

            <!-- 模拟状态5：咨询，已解答 已支付 -->
            <div class="group clr" v-if="item.status == 4">
              <div class="right">
                <div class="btn btn_gray" @click.stop="delOrderItem(index, 2)">删除订单</div>
                <div class="btn btn_orange" @click.stop="gotoNewOrder(item)">再下一单</div>
              </div>
            </div>
            <!-- 模拟状态7：咨询，已取消 未支付 -->
            <div class="group clr" v-if="item.status == 6">
              <div class="right">
                <div class="btn btn_orange" @click.stop="gotoNewOrder(item)">重新支付</div>
              </div>
            </div>
            <!-- 模拟状态8：咨询，已取消 已退款 -->
            <div class="group clr" v-if="item.status == 7">
              <div class="left">
                <div class="status">已退款</div>
              </div>
              <div class="right">
                <div class="btn btn_orange" @click.stop="gotoNewOrder(item)">重新支付</div>
              </div>
            </div>
          </footer>
        </div>
      </template>
    </transition-group>
  </div>
</template>

<script>
import countTime from '@/components/countTime';

export default {
  props: {
    value: {
      type: Object,
      default: function() {
        return {};
      },
      required: true
    },
    curType: {
      type: Number,
      required: true
    }
  },
  components: {
    countTime
  },
  data: function() {
    return {
      //传过来的内容
      curDataArr: this.value
    };
  },
  filters: {
    whichStatus(num) {
      let str = '';
      switch (num) {
        case 1:
          str = '待支付';
          break;
        case 2:
          str = '信息未填写';
          break;
        case 3:
          str = '解答中';
          break;
        case 4:
          str = '已解答';
          break;
        case 5:
          str = '已解答';
          break;
        case 6:
          str = '已取消';
          break;
        case 7:
          str = '已取消';
          break;
      }
      return str;
    },
    // 初始化日期格式
    initDateStr: function(time) {
      var _date = new Date(time * 1000);
      var _year = _date.getFullYear();
      var _month = _date.getMonth() + 1;
      var _day = _date.getDate();
      var _hour = _date.getHours();
      var _minutes = _date.getMinutes();
      var _seconds = _date.getSeconds();
      _year = _year < 10 ? '0' + _year : _year;
      _month = _month < 10 ? '0' + _month : _month;
      _day = _day < 10 ? '0' + _day : _day;
      _hour = _hour < 10 ? '0' + _hour : _hour;
      _minutes = _minutes < 10 ? '0' + _minutes : _minutes;
      _seconds = _seconds < 10 ? '0' + _seconds : _seconds;
      return _year + '-' + _month + '-' + _day + ' ' + _hour + ':' + _minutes + ':' + _seconds;
    }
  },
  methods: {
    //删除订单,type表示是测算还是咨询
    delOrderItem: function(idx, type) {
      this.$vux.confirm.show({
        title: '温馨提醒',
        content: '是否确认删除订单？',  
        onConfirm: () => {          
          //测算数据的长度
          let csListLength = this.curDataArr[1].length;
          // 如果删除的是咨询里面的订单内容，那么删除的索引值需要加上测算内容的长度。
          // 否则就是当前传入的索引值
          let delIndex = type == 1 ? idx : Number(csListLength + idx);

          let orderCode = '';// 订单号
          // 如果删除的是测算
          if( type == 1){
            orderCode = this.curDataArr[0][idx].ordercode
          }else{
            orderCode = this.curDataArr[0][delIndex].orders_ordercode
          }

          this.$fetch.post('/app/Jmyc/order_del',{
            ordercode: orderCode,
            ordertype: type == 1 ? "cs" : "qs",
            device: this.$store.state.userID || 40
          }).then((data) => {
            if(data.code == 200){
              this.$vux.toast.show({
                text: '删除成功',
                type: 'text',
                position: 'top'
              });
            }
          })
          // 前端删除测算或者咨询订单的内容
          this.curDataArr[type].splice(idx, 1);
          // 同时需要删除所有订单中，应该删除的那个订单内容
          this.curDataArr[0].splice(delIndex, 1);

          this.$emit('input', this.curDataArr);  

        }
      });
    },
    // 跳转到订单页面
    gotoOrderInfo(data) {
      let param = {
        orderCode: data.orders_ordercode
      };
      this.$router.push({ path: '/orderInfo', query: param });
    },
    // 跳转到 确认订单页面
    gotoOrderPay: function(data) {
      this.$router.push({
        path:'/confirmOrder',
        query:{
          ordercode:data.orders_ordercode
        }
      });
    },
    // 跳转到补充信息页面
    gotoEditInfo: function(data) {
      this.$router.push({
        path:'/editUserInfo',
        query:{
          isOrderIn:true,
          ordercode:data.orders_ordercode,
          mid:data.orders_mid
        }
      });
    },
    // 测算，跳到支付或者详情页
    gotoPage: function(data) {
      //如果已支付
      if (data.state) {
        window.location.href = data.detailurl;
      } else {
        window.location.href = data.unlockurl;
      }
    },
    // 咨询，重新支付 或者 再下一单,跳转到大师详情页
    gotoNewOrder:function(data){
      this.$router.replace({
        path:'/teacherDetail',
        query:{
          type_id:data.category_id,
          mid:data.orders_mid
        }
      })
    },
    // 倒计时结束，触发取消订单。
    timeover:function(ordercode,index,itemData){
      // 测算的长度
      // let csArrLength = this.curDataArr[1].length;
      // let allIndex = index + csArrLength;
      // console.log(itemData)

      // 修改原来的状态为已取消，未支付
      // itemData.orders_pay_status = 1;
      // itemData.orders_status = 1;
      // itemData.status = 1;
      // console.log(itemData)
      // 删除咨询订单的内容
      // this.curDataArr[2].splice(index, 1);
      // 同时需要删除所有订单中，应该删除的那个订单内容
      // this.curDataArr[0].splice(allIndex, 1);

      // 同时添加一个新的订单，防止删除之后数组长度不正确，影响第二个删除
      // this.curDataArr[2].push(itemData);
      // this.curDataArr[0].splice(itemData);

      // this.$fetch.post('/v1/Order/cancelOrder',{
      //   ordercode:ordercode,
      //   remark:'支付超时'
      // })
      // .then((data) => {        
      //   this.$vux.toast.show({
      //     text:'订单时间已到，订单自动取消',
      //     type:'text',
      //     position:'top'
      //   })
      // })
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../assets/css/public.less';
#listItem-component {
  padding: 20px;
  .listItem-item {
    background: #fff;
    padding: 0 30px;
    .radius(10px);
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .c_header {
      .lineH(80px);
      .fs(28px);
      .color(#999);
      border-bottom: 1px solid @borderC; /*no*/
      .o_orange {
        .color(@baseColor);
      }
    }

    .c_body {
      display: flex;
      padding: 30px 0;
      .img {
        flex: 0 0 130px;
        height: 130px;
        .radius(10px);
        overflow: hidden;
        margin-right: 30px;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .info {
        flex: 1;
        height: 130px;
        position: relative;
        padding: 5px 0;
        .fs(28px);
        .p0 {
          display: flex;
          align-items: center;
          .name {
            .fs(32px);
            flex: 1;
          }
        }
        .p3 {
          position: absolute;
          left: 0;
          bottom: 5px;
          .color(#999);
        }
      }
    }

    .c_foot {
      .group {
        padding-bottom: 30px;
      }
      .left {
        float: left;
        height: 70px;
        line-height: 70px;
        .time {
          display: flex;
          align-items: center;
          color: @baseColor;
          i {
            display: block;
            width: 24px;
            height: 28px;
            margin-right: 10px;
            background: url(../../../static/image/orderInfo/i_countDown.png) no-repeat center/100%
              100%;
          }
        }
        .status {
          color: #999;
        }
      }
      .right {
        float: right;
        .btn {
          width: 180px;
          height: 70px;
          line-height: 70px;
          text-align: center;
          float: left;
          &:not(:last-of-type) {
            margin-right: 20px;
          }
          .radius(10px);
          &.btn_orange {
            border: 1px solid @themeColor; /*no*/
            color: @themeColor;
          }
          &.btn_gray {
            border: 1px solid @borderC; /*no*/
            color: #999;
          }
        }
      }
    }
  }
  .timebox {
    color: #feac32;
    font-size: 28px;
    display: inline;
  }
}

.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter {
  transform: translateY(-30px);
  opacity: 0;
}
.slide-fade-leave-to {
  transform: translateX(190px);
  opacity: 0;
}
</style>